<template>
  <a-config-provider :locale="locale">
    <router-view v-slot="{ Component }">
      <transition name="custom-classes-transition" enter-active-class="animated fadeIn">
        <keep-alive :include="include">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
    <div class="page-loading" v-show="commonStore.loadingCount > 0"><a-spin /></div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { useCommonStore } from '@/store/common';
dayjs.locale('zh-cn');
export default {
  name: 'App',
  data() {
    return {
      include: [],
      commonStore: useCommonStore(),
      locale: zhCN,
    };
  },
  watch: {
    $route(to, from) {
      // 如果要to(进入)的页面是需要keepAlive缓存的，把name push进include数组中
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      // 如果 要 form(离开) 的页面是 keepAlive缓存的，
      // 再根据 deepth 来判断是前进还是后退
      // 如果是后退：
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        const index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="less">
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}
.animated {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
